<template>
  <div v-bind:id="playerId">
<!--    <div  class="prism-player" id="J_prismPlayer"></div>-->
  </div>
</template>
<script>
  import Notify from "../util/notify";

  export default {
    name: 'player',
    props: {
      playerId: {
        default: "player-div"
      },
    },
    data() {
      return {
        aliPlayer: {}, // 播放器实例
      }
    },
    methods: {
      /**
       * 基于url播放
       * @param url
       */
      playUrl(url) {
        let _this = this 
        console.log("开始播放:", url) 

        //如果已经有播放器了，则将播放器div删除
        if (_this.aliPlayer) {
          _this.aliPlayer = null 
          $("#" + _this.playerId + '-player').remove() 
        }

        // 初始化播放器
        $("#" + _this.playerId).append("<div class=\"prism-player\" id=\"" + _this.playerId + "-player\"></div>") 
        _this.aliPlayer = new Aliplayer({
          id: _this.playerId + '-player',
          width: '100%',
          autoplay: false,
          source: url,
          cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png',
        }, function (player) {
          console.log('播放器创建好了。')
        }) 
      },

      /**
       * 基于vod播放
       * @param vod
       */
      playVod (vod) {
        let _this = this

        _this.$axios.get(process.env.VUE_APP_SERVER + '/file/web/get-auth/' + vod).then((resp)=>{  //  获取播放凭证

          if (resp.data.success) {
            //如果已经有播放器了，则将播放器div删除
            if (_this.aliPlayer) {
              _this.aliPlayer = null 
              $("#" + _this.playerId + '-player').remove() 
            }

            // 初始化播放器
            $("#" + _this.playerId).append("<div class=\"prism-player\" id=\"" + _this.playerId + "-player\"></div>") 
            _this.aliPlayer = new Aliplayer({
              id: _this.playerId + '-player',
              width: '100%',
              autoplay: false,
              vid: vod,
              playauth: resp.data.content, //  播放凭证
              // cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png',
              encryptType:1,  // 当播放私有加密流时需要设置。
            },function(player){
              console.log('播放器创建好了。')
            }) 
          } else {
            Notify.warning('播放错误。')
          }
        })

      },

      pause() {
        let _this = this
        _this.aliPlayer.pause()
      }
    }
  }
</script>